<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        父子组件之间通信的方法之一：
        
        父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，子组件通过 事件events 给父组件发送消息。
        比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。
        而当子组件内部发生了什么事情的时候，就通过自定义事件来把这个事情涉及到的数据暴露出来，供父组件处理。

        <my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component>

        如上代码，foo 是组件内部定义的一个 prop 属性，baz 是父组件的一个 data 属性，event-a 是子组件定义的一个事件，doThis 是父组件的一个方法
        
        过程就是这样：

        1.父组件把 baz 数据通过 prop 传递给子组件的 foo；
        2.子组件内部得到 foo 的值，就可以进行相应的操作；
        3.当子组件内部发生了一些变化，希望父组件能知道时，就利用代码触发 event-a 事件，把一些数据发送出去
        4.父组件把这个事件处理器绑定为 doThis 方法，子组件发送的数据，就作为 doThis 方法的参数被传进来
        5.然后父组件就可以根据这些数据，进行相应的操作

        在下面的代码中，v-bind:val="num" 表明父组件的 num 值和子组件中 prop 属性的 val 值进行绑定，子组件内部可以通过
        val 得到父组件的值，而 v-on:change-apple-num="updateNum" 表明子组件会发送 change-apple-num 事件给父组件，并且发送 data 数据，
        然后触发父组件调用 updateNum 方法进行相应处理
     -->
    <div id="app">
        <hello-world v-bind:val="num" v-on:change-apple-num="updateNum"></hello-world>
        <button @click="doubleAdd">父组件加2苹果</button>
        <div>你买了{{num}}个苹果</div>
    </div>

    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script>
        // 子组件
        const HelloWorld = {
            template: `<div class="hello">
                            <button @click="add">子组件加1苹果</button>
                            <div>你买了{{val}}个苹果</div>
                       </div>`,
            props: {
                val: Number
            },
            methods: {
                add() {
                    this.val += 1;
                    this.$emit('change-apple-num', this.val);
                }
            }
        };

        // 父组件
        new Vue({
            el: '#app',
            name: 'App',
            components: {
                HelloWorld
            },
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                doubleAdd(){
                    this.num += 2;
                },
                updateNum(data){
                    console.log("data: ", data);
                    this.num = data;
                }
            }
        });
    </script>
</body>
</html>